<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Input, Button } from 'ant-design-vue'
import { SearchOutlined, SendOutlined } from '@ant-design/icons-vue'

// 路由实例
const router = useRouter()

// 搜索相关状态
const searchText = ref('')
const searchLoading = ref(false)

// 响应式屏幕宽度检测
const isMobile = ref(false)

// 检测屏幕宽度 - 响应式设计支持，768px为断点
const checkScreenSize = () => {
	isMobile.value = window.innerWidth < 768
}

// 专注于搜索功能，移除角色推荐相关状态

// 移除角色数据，专注于搜索体验

// 热门搜索建议
const popularSearches = ['编程助手', '文案写作', '英语学习', '心理咨询', '游戏攻略', '职业规划']

// 处理搜索 - 跳转到推荐AI页面并传递搜索关键词
const handleSearch = () => {
	if (!searchText.value.trim()) return

	searchLoading.value = true
	console.log('搜索:', searchText.value)

	// 跳转到推荐AI页面，传递搜索关键词
	setTimeout(() => {
		router.push({
			path: '/bot',
			query: {
				search: searchText.value.trim()
			}
		})
		searchLoading.value = false
	}, 300)
}

// 处理搜索建议点击 - 快速填入热门搜索关键词并触发搜索
const handleSuggestionClick = suggestion => {
	searchText.value = suggestion
	handleSearch()
}

// 移除角色相关处理函数

// 组件挂载后加载数据
onMounted(() => {
	// 检测屏幕尺寸并添加监听器
	checkScreenSize()
	window.addEventListener('resize', checkScreenSize)

	// 专注于搜索功能，移除角色加载逻辑
})

// 组件卸载时移除监听器
onUnmounted(() => {
	window.removeEventListener('resize', checkScreenSize)
})
</script>

<template>
	<div class="home-page">
		<!-- 搜索区域 -->
		<div class="search-section">
			<div class="search-container">
				<div class="input">
					<svg
						class="svg"
						viewBox="0 0 24 24"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M11.5 6C11.3949 6.00006 11.2925 5.96705 11.2073 5.90565C11.1221 5.84425 11.0583 5.75758 11.0251 5.65792L10.7623 4.86908C10.6623 4.57101 10.4288 4.33629 10.13 4.23693L9.34102 3.97354C9.24166 3.94019 9.1553 3.87649 9.09411 3.79142C9.03292 3.70635 9 3.60421 9 3.49943C9 3.39465 9.03292 3.29252 9.09411 3.20745C9.1553 3.12238 9.24166 3.05867 9.34102 3.02532L10.13 2.76193C10.4282 2.66191 10.663 2.42852 10.7623 2.12979L11.0258 1.34094C11.0591 1.24161 11.1229 1.15526 11.2079 1.09409C11.293 1.03291 11.3952 1 11.5 1C11.6048 1 11.707 1.03291 11.7921 1.09409C11.8771 1.15526 11.9409 1.24161 11.9742 1.34094L12.2377 2.12979C12.2868 2.27697 12.3695 2.4107 12.4792 2.52041C12.589 2.63013 12.7227 2.71281 12.87 2.76193L13.659 3.02532C13.7583 3.05867 13.8447 3.12238 13.9059 3.20745C13.9671 3.29252 14 3.39465 14 3.49943C14 3.60421 13.9671 3.70635 13.9059 3.79142C13.8447 3.87649 13.7583 3.94019 13.659 3.97354L12.87 4.23693C12.5718 4.33696 12.337 4.57034 12.2377 4.86908L11.9742 5.65792C11.9411 5.75747 11.8774 5.84406 11.7923 5.90545C11.7072 5.96684 11.6049 5.99992 11.5 6Z"
							fill="currentColor"
						></path>
						<path
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M6 13C5.85133 13.0001 5.7069 12.9504 5.58969 12.859C5.47247 12.7675 5.38921 12.6395 5.35313 12.4952L5.12388 11.5745C4.91418 10.7391 4.26198 10.0868 3.42674 9.87703L2.50619 9.64774C2.36169 9.61194 2.23333 9.52878 2.14159 9.41151C2.04985 9.29425 2 9.14964 2 9.00075C2 8.85185 2.04985 8.70724 2.14159 8.58998C2.23333 8.47272 2.36169 8.38955 2.50619 8.35376L3.42674 8.12446C4.26198 7.91473 4.91418 7.2624 5.12388 6.427L5.35313 5.50629C5.38892 5.36176 5.47207 5.23338 5.58931 5.14162C5.70655 5.04986 5.85113 5 6 5C6.14887 5 6.29345 5.04986 6.41069 5.14162C6.52793 5.23338 6.61108 5.36176 6.64687 5.50629L6.87612 6.427C6.97865 6.83721 7.19071 7.21184 7.48965 7.51082C7.78858 7.80981 8.16313 8.02192 8.57326 8.12446L9.49381 8.35376C9.63831 8.38955 9.76667 8.47272 9.85841 8.58998C9.95015 8.70724 10 8.85185 10 9.00075C10 9.14964 9.95015 9.29425 9.85841 9.41151C9.76667 9.52878 9.63831 9.61194 9.49381 9.64774L8.57326 9.87703C8.16313 9.97957 7.78858 10.1917 7.48965 10.4907C7.19071 10.7897 6.97865 11.1643 6.87612 11.5745L6.64687 12.4952C6.61079 12.6395 6.52753 12.7675 6.41031 12.859C6.2931 12.9504 6.14867 13.0001 6 13Z"
							fill="currentColor"
						></path>
						<path
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M13.5005 23C13.3376 23 13.1791 22.9469 13.049 22.8487C12.9189 22.7505 12.8243 22.6127 12.7795 22.456L11.9665 19.61C11.7915 18.9971 11.4631 18.4389 11.0124 17.9882C10.5616 17.5374 10.0035 17.209 9.39054 17.034L6.54454 16.221C6.38795 16.1761 6.25021 16.0815 6.15216 15.9514C6.05411 15.8214 6.00108 15.6629 6.00108 15.5C6.00108 15.3371 6.05411 15.1786 6.15216 15.0486C6.25021 14.9185 6.38795 14.8239 6.54454 14.779L9.39054 13.966C10.0035 13.791 10.5616 13.4626 11.0124 13.0118C11.4631 12.5611 11.7915 12.0029 11.9665 11.39L12.7795 8.544C12.8244 8.38741 12.919 8.24967 13.0491 8.15162C13.1792 8.05357 13.3376 8.00054 13.5005 8.00054C13.6634 8.00054 13.8219 8.05357 13.952 8.15162C14.0821 8.24967 14.1767 8.38741 14.2215 8.544L15.0345 11.39C15.2096 12.0029 15.538 12.5611 15.9887 13.0118C16.4394 13.4626 16.9976 13.791 17.6105 13.966L20.4565 14.779C20.6131 14.8239 20.7509 14.9185 20.8489 15.0486C20.947 15.1786 21 15.3371 21 15.5C21 15.6629 20.947 15.8214 20.8489 15.9514C20.7509 16.0815 20.6131 16.1761 20.4565 16.221L17.6105 17.034C16.9976 17.209 16.4394 17.5374 15.9887 17.9882C15.538 18.4389 15.2096 18.9971 15.0345 19.61L14.2215 22.456C14.1768 22.6127 14.0822 22.7505 13.9521 22.8487C13.822 22.9469 13.6635 23 13.5005 23Z"
							fill="currentColor"
						></path>
					</svg>
					<!-- 搜索输入框 - 支持回车键触发搜索，双向数据绑定 -->
					<input
						class="search"
						type="text"
						placeholder="搜索AI角色或描述你的需求..."
						v-model="searchText"
						@keyup.enter="handleSearch"
					/>
				</div>
				<Button
					type="primary"
					class="search-btn"
					:loading="searchLoading"
					@click="handleSearch"
				>
					<SendOutlined />
					开始对话
				</Button>
			</div>

			<!-- 热门搜索建议 - 在所有设备上显示 -->
			<div class="search-suggestions">
				<span class="suggestions-label">热门搜索：</span>
				<div class="suggestions-list">
					<span
						v-for="suggestion in popularSearches"
						:key="suggestion"
						class="suggestion-tag"
						@click="handleSuggestionClick(suggestion)"
					>
						{{ suggestion }}
					</span>
				</div>
			</div>
		</div>

		<!-- 专注于搜索功能，移除角色推荐区域 -->
	</div>
</template>

<style lang="scss" scoped>
.home-page {
	// 使用弹性布局实现完美居中
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	// width: 100vw;
	padding: 20px;
	// background: #fafbfc;
	box-sizing: border-box;
	max-width: 1460px;
	// margin: 0 auto;
	// padding: 0 20px;
}

/* 搜索区域 - 弹性布局居中 */
.search-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 800px;
}

.search-container {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	max-width: 700px;
	margin-bottom: 24px;
}

/* 搜索框样式 */
.input {
	--icon-size: 20px;
	position: relative;
	flex: 1;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}

.input svg {
	position: absolute;
	width: var(--icon-size);
	top: 50%;
	left: 24px;
	transform: translateY(-50%);
	color: #667eea;
	z-index: 10;
	filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
	transition: all 0.3s ease;
}

.input svg path {
	transform-box: fill-box;
	transform-origin: center;
}

.input:focus-within svg path {
	animation: pop 0.5s var(--d);
}

.input svg path:nth-of-type(1) {
	--d: 0.24s;
	--r: 20deg;
	--s: 1.5;
}
.input svg path:nth-of-type(2) {
	--d: 0.12s;
	--r: 10deg;
	--s: 1.4;
}
.input svg path:nth-of-type(3) {
	--d: 0s;
	--r: 0deg;
	--s: 1.25;
}

@keyframes pop {
	50% {
		scale: var(--s, 1);
		rotate: var(--r, 0deg);
	}
}

.search {
	width: calc(40vw + 120px);
	max-width: 590px;
	padding: 18px 24px 18px calc(24px + var(--icon-size) + 16px);
	font-size: 16px;
	border: none;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	outline: none;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(102, 126, 234, 0.05) 50%,
			rgba(118, 75, 162, 0.05) 100%);
		pointer-events: none;
		z-index: 1;
	}

	&::placeholder {
		color: #6b7280;
		font-weight: 500;
		position: relative;
		z-index: 2;
	}

	&:focus {
		background: rgba(255, 255, 255, 0.98);
		box-shadow:
			0 12px 40px rgba(102, 126, 234, 0.25),
			0 4px 16px rgba(102, 126, 234, 0.15),
			0 0 0 2px rgba(102, 126, 234, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
		transform: translateY(-2px) scale(1.01);
	}

	&:hover:not(:focus) {
		background: rgba(255, 255, 255, 0.97);
		box-shadow:
			0 12px 40px rgba(0, 0, 0, 0.15),
			0 4px 16px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
		transform: translateY(-1px);
	}

	// 输入文字样式
	color: #1f2937;
	font-weight: 500;
	position: relative;
	z-index: 2;
}

.search-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 20px;
	padding: 18px 32px;
	color: white;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	white-space: nowrap;
	min-width: 160px;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 8px 32px rgba(102, 126, 234, 0.3),
		0 2px 8px rgba(102, 126, 234, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.6s ease;
	}

	&:hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 12px 48px rgba(102, 126, 234, 0.4),
			0 4px 16px rgba(102, 126, 234, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);

		&::before {
			left: 100%;
		}
	}

	&:active {
		transform: translateY(-1px) scale(1.01);
		box-shadow:
			0 8px 32px rgba(102, 126, 234, 0.35),
			0 2px 8px rgba(102, 126, 234, 0.25);
	}

	&:focus {
		outline: none;
		box-shadow:
			0 8px 32px rgba(102, 126, 234, 0.3),
			0 2px 8px rgba(102, 126, 234, 0.2),
			0 0 0 3px rgba(102, 126, 234, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}

	.anticon {
		font-size: 16px;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}
}

/* 搜索建议 */
.search-suggestions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.suggestions-label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	letter-spacing: 0.5px;
}

.suggestions-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.suggestion-tag {
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 24px;
	font-size: 13px;
	color: #4b5563;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
	font-weight: 500;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg,
			rgba(102, 126, 234, 0) 0%,
			rgba(102, 126, 234, 0.05) 50%,
			rgba(118, 75, 162, 0.05) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	&:hover {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-color: transparent;
		transform: translateY(-2px) scale(1.05);
		box-shadow:
			0 8px 24px rgba(102, 126, 234, 0.3),
			0 2px 8px rgba(102, 126, 234, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);

		&::before {
			opacity: 1;
		}
	}

	&:active {
		transform: translateY(-1px) scale(1.02);
	}
}

/* 移除角色相关样式，专注于搜索功能 */

/* 响应式设计 */
@media (max-width: 768px) {
	.home-page {
		padding: 16px;
		// 移除白色背景，让渐变背景透出来
		// background: white;
	}

	.search-section {
		// 移动端搜索区域保持居中
		width: 100%;
		max-width: none;
	}

	.search-container {
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

	.search {
		font-size: 16px;
		padding: 18px 20px 18px calc(20px + var(--icon-size) + 16px);
		border-radius: 20px;
		width: 100%;

		&:focus {
			transform: translateY(-2px) scale(1.01);
			box-shadow:
				0 12px 40px rgba(102, 126, 234, 0.25),
				0 4px 16px rgba(102, 126, 234, 0.15),
				0 0 0 2px rgba(102, 126, 234, 0.2);
		}

		&:hover:not(:focus) {
			transform: translateY(-1px);
			box-shadow:
				0 8px 24px rgba(0, 0, 0, 0.12),
				0 2px 8px rgba(0, 0, 0, 0.08);
		}
	}

	.search-btn {
		width: calc(50% - 20px);
		padding: 18px 24px;
		font-size: 16px;
		border-radius: 20px;
		font-weight: 600;

		&:hover {
			transform: translateY(-2px) scale(1.02);
		}

		&:active {
			transform: translateY(-1px) scale(1.01);
		}
	}

	.input svg {
		left: 20px;
		width: 18px;
	}

	// 移动端搜索建议样式调整
	.search-suggestions {
		flex-direction: column;
		gap: 12px;

		.suggestions-list {
			justify-content: center;
		}

		.suggestion-tag {
			font-size: 12px;
			padding: 6px 12px;
			border-radius: 20px;

			&:hover {
				transform: translateY(-1px) scale(1.03);
			}

			&:active {
				transform: translateY(-0.5px) scale(1.01);
			}
		}
	}
}

@media (max-width: 480px) {
	.home-page {
		padding: 12px;
	}

	.search-section {
		// 小屏幕设备保持居中
		max-width: none;
	}

	.search-container {
		gap: 16px;
		width: 100%;
	}

	.search {
		font-size: 15px;
		padding: 16px 18px 16px calc(18px + var(--icon-size) + 14px);
		border-radius: 18px;
		width: 100%;

		&:focus {
			transform: translateY(-1px) scale(1.005);
		}

		&:hover:not(:focus) {
			transform: translateY(-0.5px);
		}
	}

	.search-btn {
		width: calc(60% + 20px);
		padding: 18px 20px;
		font-size: 15px;
		border-radius: 18px;

		&:hover {
			transform: translateY(-1px) scale(1.01);
		}

		&:active {
			transform: translateY(-0.5px) scale(1.005);
		}
	}

	.input svg {
		left: 18px;
		width: 16px;
	}

	// 小屏幕搜索建议进一步优化
	.search-suggestions {
		.suggestion-tag {
			font-size: 11px;
			padding: 5px 10px;
			border-radius: 18px;

			&:hover {
				transform: translateY(-0.5px) scale(1.02);
			}
		}

		.suggestions-label {
			font-size: 12px;
		}
	}
}
</style>
